<template>
  <div class="employee-container">
    <el-row class="main">
      <div class="card-main">
        <el-card>
          <div slot="header" class="card-header">
            <span>作业范围分配</span>
            <div>
              <el-button
                v-show="!editParallel"
                size="small"
                type="success"
                class="buttonStyle"
                @click="editClick"
              >编辑</el-button>
              <el-button
                v-show="editParallel"
                size="small"
                type="success"
                class="buttonStyle"
                @click="saveClick"
              >保存</el-button>
              <el-button
                v-show="editParallel"
                size="small"
                type="success"
                style="width: 80px; height: 30px"
                plain
                @click="cancelClick"
              >取消</el-button>
            </div>
          </div>
          <div class="card-footer">
            <el-row class="footer-top">
              <span>地区关键词：</span>
              <el-input
                v-model="value"
                class="inputStyle"
                placeholder="请输入地区关键词"
              />
            </el-row>
            <el-row v-show="editParallel" class="main">
              <el-button
                v-show="!drawbut"
                type="success"
                class="buttonStyle"
                size="small"
                @click="drawClick"
              >开始绘制</el-button>
              <el-button
                v-show="drawbut"
                type="success"
                class="buttonStyle"
                size="small"
                style="margin: 0"
                @click="finishClick"
              >完成绘制</el-button>
              <el-button
                v-show="drawbut"
                type="success"
                class="buttonStyle"
                size="small"
                @click="deleteClick"
              >删除围栏</el-button>
            </el-row>
            <el-row class="footer-bottom">
              <div class="header-box">
                <img src="@/assets/warn.png" alt="" class="warnImg">
                <span
                  v-show="!editParallel"
                  class="warningText"
                >当前{{ name }}暂无作业范围</span>
                <span
                  v-show="editParallel"
                  class="warningText"
                >点击或拖动鼠标绘制电子围栏，右击鼠标结束图形绘制，图形不可有交叉点。完成绘制后，点击提交按钮保存。仅支持绘制单个电子围栏区域</span>
              </div>
              <div class="footer-box">
                <span>..</span>
              </div>
            </el-row>
          </div>
        </el-card>
      </div>
    </el-row>
  </div>
</template>

<script>
import { getJodAreaAPI, saveBusinessScopeAPI } from '@/api/employee'
export default {
  data() {
    return {
      // 快递员id
      userId: this.$route.params.id,
      // 编辑按钮
      editParallel: false,
      // 绘制按钮
      drawbut: false,
      // 地区关键词
      value: '',
      // 业务范围
      businessScope: {
        bid: '',
        created: '',
        latitude: '',
        longitude: '',
        polygon: [],
        type: '2',
        updated: ''
      }
      //
    }
  },
  computed: {
    name() {
      return this.$route.query.name
    }
  },
  created() {
    !this.userId && this.$router.back()
    this.areaData()
  },
  methods: {
    // 获取作业范围
    async areaData() {
      const { data } = await getJodAreaAPI(this.userId, '2')
      this.businessScope = data.data
    },
    // 编辑
    editClick() {
      this.editParallel = true
    },
    // 保存
    async saveClick() {
      const result = await saveBusinessScopeAPI(this.businessScope)
      console.log(result)
      this.editParallel = false
    },
    // 取消
    cancelClick() {
      this.editParallel = false
    },
    // 开始绘制
    drawClick() {
      this.drawbut = true
    },
    // 完成绘制
    finishClick() {
      this.drawbut = false
    },
    // 删除围栏
    deleteClick() {
      this.drawbut = false
    }
  }
}
</script>

<style lang="scss" scoped>
.employee-container {
  padding: 10px;
  .main {
    padding: 0 10px;
    flex-grow: 1;
    height: 100%;
    ::v-deep .el-card__header {
      padding: 10px 20px;
      background-color: #f8faff;
      font-size: 14px;
      font-weight: bold;
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .main {
      padding: 0;
      margin-bottom: 20px;
      margin-left: 10px;
    }

    .card-footer {
      display: flex;
      align-items: flex-start;
      font-size: 13px;
      flex-direction: column;
      .footer-top {
        margin-bottom: 20px;
      }

      .inputStyle {
        width: 200px;
      }

      .footer-bottom {
        font-size: 12px;
        width: 100%;
        .header-box {
          margin: 0 auto;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          margin-bottom: 10px;
          background-color: rgb(255, 245, 231);
          color: rgb(198, 126, 18);
          width: 100%;
          border-radius: 3px;
          height: 28px;
          .warnImg {
            width: 12px;
            height: 12px;
          }
          .warningText {
            margin-left: 10px;
          }
        }
        .footer-box {
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          height: 200px;
          border: 1px solid rgb(198, 126, 18);
        }
      }
    }
  }
}
.buttonStyle {
  width: 80px;
  height: 30px;
  background-color: #189450;
  border-color: #189450;
}
</style>
